<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品展示</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>    <el-container>
      <el-container>
        <el-main>
          <!--商品表格开始-->
          <el-row >
            <el-col :span="6" v-for="p in productArr">
              <el-card>
                <a :href="'/sys-product/temp/products/ProductDetail?id='+p.id">
                  <img class="p_img" :src="require('D:/Tedu/tedu/data-management-system/files'+p.url)" width="100%" height="233" alt="">
                </a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    <a :href="'/sys-product/temp/products/ProductDetail?id='+p.id">
                      {{p.title}}
                    </a>
                  </p>
                  <p style="font-size: 12px;color: #666">
                    ￥{{p.price}} <s>{{p.old_price}}</s>
                    <span style="float: right">销量:{{p.sale_count}}</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
export default {
  data: function () {
    return {
      productArr:[],
    }
  },
  methods: {
    goBack(){
      //返回上一页面
      history.back();
    },
  },
  created:function () {
    console.log("开始执行加载展示商品列表功能```")
    let url="http://localhost:9081/product/selectNotOverDue"
    console.log(url)
    this.axios
        .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
        .get(url).then( (response)=> {
      console.log(response.data)
      this.productArr=response.data;
      console.log("11111111productArr=")
      console.log(this.productArr)
    })
  }
}
</script>

<style>

</style>